<template>
  <div class="header">
    <div class="header__left">
      <div class="header__left__img iconfont">&#xe65f;</div>
      <div class="header__left__text">北京理工大学国防科技园2号楼10层</div>
    </div>
    <div class="header__right iconfont">&#xe860;</div>
  </div>
  <div class="search">
    <div class="search__icon iconfont">&#xe6a8;</div>
    <div class="search__text">山姆会员商店优惠商品</div>
  </div>
  <div class="banner">
    <img
      class="banner__img"
      src="http://www.dell-lee.com/imgs/vue3/banner.jpg"
    />
  </div>
  <div class="types">
    <div class="types__item">
      <img
        class="types__item__icon"
        src="http://www.dell-lee.com/imgs/vue3/超市.png"
      />
      <div class="types__item__desc">超市便利</div>
    </div>
    <div class="types__item">
      <img
        class="types__item__icon"
        src="http://www.dell-lee.com/imgs/vue3/超市.png"
      />
      <div class="types__item__desc">超市便利</div>
    </div>
    <div class="types__item">
      <img
        class="types__item__icon"
        src="http://www.dell-lee.com/imgs/vue3/超市.png"
      />
      <div class="types__item__desc">超市便利</div>
    </div>
    <div class="types__item">
      <img
        class="types__item__icon"
        src="http://www.dell-lee.com/imgs/vue3/超市.png"
      />
      <div class="types__item__desc">超市便利</div>
    </div>
    <div class="types__item">
      <img
        class="types__item__icon"
        src="http://www.dell-lee.com/imgs/vue3/超市.png"
      />
      <div class="types__item__desc">超市便利</div>
    </div>
    <div class="types__item">
      <img
        class="types__item__icon"
        src="http://www.dell-lee.com/imgs/vue3/超市.png"
      />
      <div class="types__item__desc">超市便利</div>
    </div>
    <div class="types__item">
      <img
        class="types__item__icon"
        src="http://www.dell-lee.com/imgs/vue3/超市.png"
      />
      <div class="types__item__desc">超市便利</div>
    </div>
    <div class="types__item">
      <img
        class="types__item__icon"
        src="http://www.dell-lee.com/imgs/vue3/超市.png"
      />
      <div class="types__item__desc">超市便利</div>
    </div>
    <div class="types__item">
      <img
        class="types__item__icon"
        src="http://www.dell-lee.com/imgs/vue3/超市.png"
      />
      <div class="types__item__desc">超市便利</div>
    </div>
    <div class="types__item">
      <img
        class="types__item__icon"
        src="http://www.dell-lee.com/imgs/vue3/超市.png"
      />
      <div class="types__item__desc">超市便利</div>
    </div>
  </div>
  <div class="divide"></div>
</template>

<script>
export default {
  name: 'StaticPart'
}
</script>

<style lang="scss" scope>
@import "../../style/viriables.scss";
@import "../../style/mixins.scss";
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 0.16rem;

  &__left {
    display: flex;
    align-items: center;

    &__img {
      width: 0.19rem;
      height: 0.15rem;
      margin-right: 0.08rem;
    }

    &__text {
      max-width: 2.5rem;

      line-height: 0.22rem;
      font-size: 0.16rem;

      // 使用变量
      color: $content-fontcolor;

      // 单行省略 mixins混入
      @include ellipsis;
    }
  }

  &__right {
    width: 0.19rem;
    height: 0.18rem;
  }
}
.search {
  display: flex;
  align-items: center;

  width: 100%;
  margin-bottom: 0.12rem;

  line-height: 0.32rem;
  border-radius: 0.16rem;

  background: $search-bgColor;
  .iconfont {
    padding: 0 0.12rem 0 0.16rem;
    font-size: 0.16rem;
    color: $search-fontColor;
  }
  &__text {
    font-size: 0.14rem;
    line-height: 0.16rem;
    color: $search-fontColor;
  }
}
.banner {
  // TODO:难点记录 当图片还没有加载完全时，先撑开宽的25.4%。1528 / 388 = 25.4%
  height: 0;
  overflow: hidden;
  padding-bottom: 25.4%;
  margin-bottom: 0.16rem;
  &__img {
    width: 100%;
  }
}
.types {
  display: flex;
  flex-wrap: wrap;
  &__item {
    width: 20%;
    margin-bottom: 0.16rem;
    &__icon {
      display: block;

      width: 0.4rem;
      height: 0.4rem;
      margin: 0 auto 0.06rem;
    }
    &__desc {
      font-size: 0.12rem;
      text-align: center;

      color: $content-fontcolor;
    }
  }
}
.divide {
  height: 0.1rem;
  margin: 0 -0.18rem;

  background: $content-bgColor;
}
</style>
